<template>
	<el-card class="main2">
		<div slot="header">
			<span>系统设置/课程管理</span>
		</div>
		<data-table 
			:size="size" 
			:rules="rules"
			path="course/" 
			:formObj="form"
			:columnAttributes="columns"
			:tableAttribute="tableAttribute"
			pageable
		>
		<template v-slot:form>
			<el-form-item label="课程名称" :label-width="labelWidth" prop="name">
				<el-input v-model="form.name" auto-complete="off"></el-input>
			</el-form-item>
			<el-form-item label="课时数" :label-width="labelWidth" prop="classHour">
				<el-input v-model.number="form.classHour" auto-complete="off"></el-input>
			</el-form-item>
		</template>
		</data-table>
	</el-card>
</template>

<script>
	import dataTable from '../components/dataTable.vue'
	export default {
		components:{dataTable},
		data() {
			// var checkNum=(rule,value,callback)=>{
			// 	console.log(rule,value);
			// 	if(!Number.isInteger(value)){
			// 		return callback(new Error('必須为整数'))
			// 	}
			// 	callback()
			// }
			return {
				size:'small',
				columns:[
					{label:'序号',prop:'id'},
					{label:'课程名称',prop:'name'},
					{label:'课时数',prop:'classHour'},
				],
				tableAttribute:{
					border:true,
					maxHeight:'600px'
				},
				form:{
					id:'',
					name:'',
					classHour:''
				},
				labelWidth: '100px',
				rules:{
					name:[{required:true,message:'课程名称不能为空',trigger:'blur'}],
					classHour:[
						{required:true,message:'课时数不能为空',trigger:'blur'},
						{
							//validator:checkNum,
							type:'number',
							message:'课时数必须为整数',
							trigger:'blur',
							transform: (value) => {
								console.log(Number.isInteger(value));
								return Number(value);
							}
							
						}
					],
				}
			}
		},
		methods:{
			
		}
	}
</script>

<style scoped>
.main2 {
	height: calc( 100% - 5px);
}
</style>
